<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="list">
      <el-table-column label="照片" prop="zhaopian">
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.zhaopian"
            fit="cover" :preview-src-list="[scope.row.zhaopian]"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name"/>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList"
    />
  </div>

</template>

<script>
export default {
  name: 'internal-open-record',
  props: {},
  data() {
    return {
      list: [],
      loading: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  created() {
    console.log('created')
    this.getList()
  },
  methods: {
    handleSearch() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.handleSearch()
    },
    getList() {
      this.loading = true

      this.list = [
        {
          name: 'sunny',
          zhaopian: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        },
        {
          name: 'tom',
          zhaopian: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        }
      ]
      this.total = 2
      this.loading = false
    }
  }
}
</script>

<style scoped lang="scss">

</style>
